<template>
    <div>
    <div class="container">
            <div class="row">
                <div class="col-md-5">
                    <br /> <br /> <label class="control-label">Peer</label>

                    <div>
                        <!-- 这里添加一个普通的文本输入框 -->
                        <input type="text" placeholder="请输入用户名" v-model="callerID">
                    </div>


                    <div class="row">
                        <div class="col-md-6">
                            <button  variant="primary" class="text-center" @click="login">login</button>


                            <div>
                                <!-- 这里添加一个普通的文本输入框 -->
                                <input type="text" placeholder="被呼叫人名" v-model="calleeID">
                            </div>


                            <button  variant="primary" class="text-center" @click="call">call</button>
                            <button  variant="primary" class="text-center" @click="stop">stop</button>
                        </div>
                    </div>
                    <br /> <label class="control-label" for="console">Console</label><br>
                    <br>
                    <div id="console" class="democonsole">
                        <ul></ul>
                    </div>
                </div>
                <div class="col-md-7">
                    <div id="videoBig">
                        <video id="videoOutput" autoplay width="640px" height="480px"></video>
                    </div>
                    <div id="videoSmall">
                        <video id="videoInput" autoplay width="240px" height="180px"
                            poster="/static/mine/wallet-popup-logo.png"></video>
                    </div>

                    <!--<image src="/static/mine/wallet-popup-logo.png"></image>-->

                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'videoBroadCast',
    data() {
        return{
            callerID: '',
            calleeID: '',
            inputValue :''
        }
    },
    computed : {
        input: {
            get: function() {
                return document.getElementById('videoInput');
            }
        },
        output: {
            get: function() {
                return document.getElementById('videoOutput');
            }
        }
    },

    mounted() {
        this.$wssApi.setInputAndOutput(this.input, this.output);
    },
    methods: {
        call() {
            console.log("click call");
            this.$wssApi.call(this.callerID, this.calleeID);
        },
        stop() {
            console.log("click stop");
            this.$wssApi.stop();
        },

        login() {
            console.log("click login",this.callerID);
            this.$wssApi.login(this.callerID);
        }
    }
}
</script>
